<template>
	<view class="content">
		<topSearch type="1" :city="cityObj" :mid="moldId"></topSearch>
		<view class="top-wrap">
			<tab id="category" :tab-data="categoryEntityList" :tab-cur-index="categoryCur" :size="80" scroll="true"
				@change="toggleCategory"></tab>
		</view>
		<swiper :current="categoryCur" class="mySwiper" :duration="duration" @change="changeCur"
			@animationfinish="swiperFinish" :disable-touch="isScroll" acceleration="false">
			<swiper-item :key="index" v-for="(item,index) in categoryEntityList" >
				<scroll-view scroll-y="true" class="scroll" scroll-top="0">
					<view class="subScore" >
						<view class="tab_list">
							<text v-for="(itemTab,index) in tab_list" :key="index" @click="changeTab(index)" :class="{'active':itemTab.isActive}">{{itemTab.title}}</text>
							
						</view>
						<view class="tab_list_rt">
							<view @click="applyMechanismSet">
								<image src="../../static/img/rzf.png" style="width: 25rpx;height: 23rpx;" mode=""></image>
								<text>入住机构方</text>
							</view>
							<view  @click="goScreen()">
								<image src="../../static/img/filter.png" style="width: 23rpx;height: 23rpx;" mode=""></image>
								<text>筛选</text>
							</view>
						</view>
					</view>
					<view class="fineArts">
						<template v-if="mchanismList.length">
						<view class="occupancy_list_item" v-for="(m,index) in mchanismList" :key='index' @click="goDetail(m)">
							<image :src="imageUrl+m.shopCover" mode="" style="width: 182rpx;height: 172rpx;"></image>
							<view class="occupancy_rt">
								<view class="occupancy_rt_title">
									<text>{{m.shopTitle}}</text>
									<image @click="houseFun(m)" :src="m.isHouses?'../../static/img/Collection_out.png':'../../static/img/Collection_in.png'" mode="" style="width: 27rpx;height: 27rpx;"></image>
								</view>
								<view class="search_label">
									<text>{{m.shopCategorys}}</text>
								</view>
								<view class="occupancy_rt_address">
									<image src="../../static/img/age.png" mode="" style="width: 22rpx;height: 20rpx;"></image>
									<text>招生年龄段：{{m.mechanismAges}}岁</text>
								</view>
								<view class="occupancy_browse">
									<view>
										山东临沂市561.12km
									</view>
									<view >
										<image src="../../static/img/browse.png" mode="" style="width: 26rpx;height: 20rpx;"></image>
										<text>{{m.mechanismViews}}万人浏览</text>
									</view>
									
								</view>
								
							</view>
						</view>
						<view >
							<uni-load-more :status="loadStatus"></uni-load-more>
						</view>
						</template>
						<template v-else>
							<view class="noData">
								<view class="noDataImg">
									<image src="../../static/img/noData.png" mode="" style="width: 298rpx;height: 339rpx;"></image>
								</view>
								<view class="noDataTitle">
									<view>暂无数据</view>
									<view>找不到相关数据</view>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 入住申请 -->
		<view class="Application_box" v-if="applyMechanism">
			<view class="Application_content">
				<view class="Application_top">
					
				</view>
				<view class="form_box">
					<view class="form_item">
						<text>您的姓名</text>
						<input type="text" placeholder="请输入您的姓名" @blur="testName" placeholder-style="font-size:28rpx;color:#666;"
							v-model="form.applyContactsName" />
							<uni-icons type="clear" v-if="nameError" class="errIcon" color="red" size="15"></uni-icons>
					</view>
					<view class="form_item">
						<text>您的电话</text>
						<input type="text" placeholder="请输入您的电话" @blur="testPhone" :placeholder-class="{'errorStyle':phoneError}" placeholder-style="font-size:28rpx;color:#666;"
							v-model="form.applyContactsPhone" />
							<uni-icons type="clear" v-if="phoneError" class="errIcon" color="red" size="15"></uni-icons>
					</view>
					<view class="form_item">
						<text>机构名称</text>
						<input type="text" placeholder="请输入您的机构名称" @blur="testMechanism" :placeholder-class="{'errorStyle':mechanismError}" placeholder-style="font-size:28rpx;color:#666;"
							v-model="form.applyMechanismName" />
							<uni-icons type="clear" v-if="mechanismError" class="errIcon" color="red" size="15"></uni-icons>
					</view>
				</view>
				<!--  -->
				<view class="want_Application_out">
					<view class="want_Application" @click="applySubmit">
						我要申请
					</view>
					<view class="want_Application_cancle" @click="this.applyMechanism=false;">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topSearch from "../component/topSearch.vue"
	import tab from "../component/topTab.vue"
	
	export default {
		data() {
			return {
				isLoadMore:false,
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				categoryCur: 0,
				// 当前数据列索引
				duration: 0,
				triggered: false,
				isScroll: false,
				nameError:false,
				phoneError:false,
				mechanismError:false,
				form:{
					
				},
				tab_list:[{
					title:"推荐",
					isActive:true
				},{
					title:"最新",
					isActive:false
				}],
				tabIndex:0,//最新和推荐切换
				subjectList:[{
					
				}],
				list: [],
				mchanismList:[],//列表数据
				imageUrl:"",//图片前缀
				categoryEntityList:[],
				applyMechanism:false,//申请入驻开关
				moldId:"",//类型id
				pageRow:1,
				pageSize:10,
				cityCode:'110101',//城市code
				nameSearch:"",//搜索的内容
				cityObj:{},//城市数据
			}
		},
		
		components: {
			topSearch,
			tab
		},
		onLoad() {
			if(uni.getStorageSync('cityChange')){
				this.cityObj=JSON.parse(uni.getStorageSync('cityChange'))
				this.cityCode=this.cityObj.code;
			}
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.loadStatus='loading';
				this.pageRow += 1
				this.getMchanismList(this.tabIndex,this.cityCode,this.moldId)
			}
			
		},
		onShow() {
		
			let that=this;
			that.isShow=false;
			that.$nextTick(function(){
				that.isShow=true;
			})
			let token = uni.getStorageSync('token');
			if (token) {
					this.getType();
			}else{
				uni.showToast({
					title: '请授权登录!',
					icon: "none",
					duration: 2000,
				});
			}
		
		},
		methods: {
			//筛选
			goScreen(){
				uni.navigateTo({
				    url: '../mySub/screenView'
				});
			},
			//进入品牌详情
			goDetail(row){
				uni.navigateTo({
				    url: '../mySub/mechanismDetail?id='+row.id
				});
			},
			//收藏
			houseFun(row){
				if(row.isHouses){
					this.$http.get('/api/user/userHousesOperation',{
						areaCode:this.cityCode,
						id:row.id,
						type:2
					}).then((data)=>{
						if(data.data.code==200){
							uni.showToast({
								title: '收藏成功!',
								icon: "success",
								duration: 2000,
							
							});
							this.getMchanismList(this.tabIndex,this.cityCode,this.moldId)
							
						}else{
							uni.showToast({
								title:data.data.message,
								icon: "none",
								duration: 2000,
							
							});
						}
					})
				}else{
					uni.showToast({
						title:'您已收藏',
						icon: "none",
						duration: 2000,
					
					});
				}
			},
			//滑动切换
			swiperFinish(e){
				this.isScroll = true;
				this.pageRow=1
				if(this.categoryCur === e.detail.current){
					return
				}else{
					this.categoryCur= e.detail.current;
					this.moldId=this.categoryEntityList[ this.categoryCur]&&this.categoryEntityList[ this.categoryCur].id;
					this.getMchanismList(0,this.cityCode,this.moldId)
				}
			},
		
			//切换索引值
			changeCur(e){
				this.isScroll = true;
			},
			//切换tab
			changeTab(index){
				this.pageRow=1
				this.tabIndex=index;
				this.tab_list.forEach((a,i)=>{
					a.isActive=false;
					if(i==index){
						a.isActive=true;
					}
				})
				this.getMchanismList(this.tabIndex,this.cityCode,this.moldId)
			},
			//获取类型
			getType(){
				
				this.$http.post('/api/mechanism/mchanismCategoryAll',{}).then((data)=>{
					if(data.data.code==200){
						this.categoryEntityList=data.data.result||[];
						if(this.$store.state.searchResult.length){
							this.categoryEntityList=JSON.parse(JSON.stringify(this.$store.state.searchResult))
							
						}
						this.moldId=this.categoryEntityList[0]&&this.categoryEntityList[0].id;
						this.getMchanismList(0,this.cityCode,this.moldId)
					}else{
						this.categoryEntityList=[];
					}
				})
			},
			//获取列表
			getMchanismList(type,cityCode,moldId){
				this.$http.post('/api/mechanism/mchanismList',{
					   "areaCode":cityCode,
						"moldId": moldId,
						"name": this.name,
						"pageRow": this.pageRow,
						"pageSize":this.pageSize,
						"sort": type
				},"application/json").then((data)=>{
					if(data.data.code==200){
						if(this.pageRow!=1){
							this.mchanismList=this.mchanismList.concat(data.data.result.records);
						}else{
							this.mchanismList=data.data.result.records;
						}
							if (data.data.result&&data.data.result.records.length) {
								if (data.data.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.isLoadMore = true
									this.loadStatus = 'nomore';
									
								} else {
									this.isLoadMore = false;
									this.loadStatus = 'more';
								}
							} else {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							}
							this.imageUrl=data.data.imageUrl;
					
						
					}else{
						this.mchanismList=[];
					}
				}).catch(()=>{
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			},
			//校验手机号
			testPhone(){
				let req = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!this.form.applyContactsPhone){
					this.phoneError=true;
					uni.showToast({
						title: '请输入您的电话!',
						icon: "none",
						duration: 2000
					});
					return false;
				
				}else if(!req.test(this.form.applyContactsPhone)){
					this.phoneError=true;
					uni.showToast({
						title: '请输入正确的电话!',
						icon: "none",
						duration: 2000
					});
					return false;
				}else{
					this.phoneError=false;
					return true;
				}
			},
			//校验姓名
			testName(){
				if(!this.form.applyContactsName){
					this.nameError=true;
					uni.showToast({
						title: '请输入您的姓名!',
						icon: "none",
						duration: 2000,
						
					});
					return false
				}else{
					this.nameError=false;
					return true
				}
			},
			//校验入驻机构
			testMechanism(){
				if(!this.form.applyMechanismName){
					this.mechanismError=true;
					uni.showToast({
						title: '请输入您的机构!',
						icon: "none",
						duration: 2000,
						
					});
					return false
				}else{
					this.mechanismError=false;
					return true
				}
			},
			//入驻提交
			applySubmit(){
				if(this.testName()&&this.testPhone()&&this.testMechanism()){
					this.$http.post('/api/mechanism/applyMechanism',this.form,'application/json').then((data)=>{
						if(data.data.code==200){
							uni.showToast({
								title: '入驻成功!',
								icon: "success",
								duration: 2000,
								success:()=> {
									this.applyMechanism=false;
								}
							});
							
						}else{
							uni.showToast({
								title: data.data.message,
								icon: "none",
								duration: 2000,
								
							});
						}
					})
				}
				
			},
			//打开入驻
			applyMechanismSet(){
				this.applyMechanism=true;
				this.form={};
			},
			toggleCategory(row) {
				this.pageRow=1;
			   this.categoryCur=row.index;
			   this.moldId=this.categoryEntityList[ this.categoryCur]&&this.categoryEntityList[ this.categoryCur].id;
			   this.getMchanismList(0,this.cityCode,this.moldId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/subject.scss'
</style>
